@import './variable.scss';

// 水平菜单样式
.el-menu--horizontal {
  // 水平菜单下底边框
  // border-bottom: none !important;
  background-color: $menu-bg-color1 !important;
  // 水平下拉菜单的高度和背景色
  @extend %menu-bar-height;
  .el-submenu {
    @extend %menu-bar-height;
    .el-menu-item,
    .el-submenu__title {
      @extend %menu-bar-height;
    }
  }
  .el-menu-item,
  .el-submenu__title {
    @extend %menu-height;
    @extend %menu-color;
    padding: 0 $menu-padding !important;
    i {
      // 隐藏菜单下拉箭头
      display: none !important;
    }
    &:hover {
      background-color: $menu-hover-color !important;
    }
  }
}

// body > .el-menu--horizontal {
//   .el-menu-item,
//   .el-submenu__title {
//     padding: 0 20px !important;
//   }
// }

body > div:nth-child(6) > ul > li

// 垂直菜单的高度和背景色
.el-menu--collapse {
  width: 100% !important;
  @extend %toolbar-color;
  .el-menu-item,
  .el-submenu__title {
    @extend %menu-height;
    @extend %toolbar-color;
    // 让工具栏按钮排列更紧密些
    padding: 0 0 !important;
    .el-tooltip {
      padding: 0 0 !important;
    }
    &:hover {
      background-color: $menu-hover-color !important;
    }
    svg,
    i {
      margin-right: 0 !important;
    }
  }
}

// 水平或垂直弹出菜单的最小和最大宽度
.el-submenu .el-menu-item,
.el-menu--popup {
  // max-width: 200px !important;
  min-width: 200px !important;
}
